A tree is visualization of a structure hierarchy. A branch can be expanded or collapsed.
Basedev ready
Preview
Code
<div class="slds-tree_container" role="application">
<h4 class="slds-text-heading--label" id="treeheading">Tree Group Header</h4>
<ul class="slds-tree" role="tree" aria-labelledby="treeheading">
<li id="tree0-node0" role="treeitem" aria-level="1">
<div class="slds-tree__item">
<button class="slds-button slds-m-right--x-small slds-is-disabled" disabled="">
<svg aria-hidden="true" class="slds-button__icon slds-button__icon--small">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
</svg>
<span class="slds-assistive-text">Toggle</span>
</button><a href="#" tabindex="-1" role="presentation" class="slds-truncate">Tree Item</a></div>
</li>
<li id="tree0-node1" role="treeitem" aria-level="1" aria-expanded="false">
<div class="slds-tree__item">
<button class="slds-button slds-m-right--x-small" aria-controls="tree0-node1">
<svg aria-hidden="true" class="slds-button__icon slds-button__icon--small">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
</svg>
<span class="slds-assistive-text">Toggle</span>
</button><a id="tree0-node1__label" href="#" tabindex="-1" role="presentation" class="slds-truncate">Tree Branch</a></div>
<ul class="slds-is-collapsed" role="group" aria-labelledby="tree0-node1__label">
<li id="tree0-node1-0" role="treeitem" aria-level="2">
<div class="slds-tree__item">
<button class="slds-button slds-m-right--x-small slds-is-disabled" disabled="">
<svg aria-hidden="true" class="slds-button__icon slds-button__icon--small">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
</svg>
<span class="slds-assistive-text">Toggle</span>
</button><a href="#" tabindex="-1" role="presentation" class="slds-truncate">Tree Item</a></div>
</li>
</ul>
</li>
<li id="tree0-node2" role="treeitem" aria-level="1">
<div class="slds-tree__item">
<button class="slds-button slds-m-right--x-small" aria-controls="tree0-node2">
<svg aria-hidden="true" class="slds-button__icon slds-button__icon--small">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
</svg>
<span class="slds-assistive-text">Toggle</span>
</button><a id="tree0-node2__label" href="#" tabindex="-1" role="presentation" class="slds-truncate">Tree Branch</a></div>
<ul class="slds-is-collapsed" role="group" aria-labelledby="tree0-node2__label">
<li id="tree0-node2-0" role="treeitem" aria-level="2">
<div class="slds-tree__item">
<button class="slds-button slds-m-right--x-small slds-is-disabled" disabled="">
<svg aria-hidden="true" class="slds-button__icon slds-button__icon--small">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
</svg>
<span class="slds-assistive-text">Toggle</span>
</button><a href="#" tabindex="-1" role="presentation" class="slds-truncate">Tree Item</a></div>
</li>
</ul>
</li>
<li id="tree0-node3" role="treeitem" aria-level="1">
<div class="slds-tree__item">
<button class="slds-button slds-m-right--x-small slds-is-disabled" disabled="">
<svg aria-hidden="true" class="slds-button__icon slds-button__icon--small">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
</svg>
<span class="slds-assistive-text">Toggle</span>
</button><a href="#" tabindex="-1" role="presentation" class="slds-truncate">Tree Item</a></div>
</li>
</ul>
</div>
Component Overview
A tree is composed of two core elements .slds-tree
and .slds-tree__item
. The tree wrapper, the outer most parent ul
, will receive the class .slds-tree
. This class will be used for scoping a tree, which allows for particular styling based on states in which the tree may enter.
A tree will need helper classes added and removed to help structure the layout. Each child node list needs an aria-level
attribute with its value being the number of levels deep it is nested to indicate the distinct grouping is nested within.
Whenever the tree has a nested group, the li
element should receive the ARIA role `group`. This will add appropiate styling to decendent .slds-tree__item
elements. A helper class of .slds-is-expanded
and .slds-is-collapsed
will need to be toggled on the appropriate child of list item node if the decendent groups are visible or not visible.
A .slds-tree__item
is any element of the tree that is a single node within a node with an ARIA attribute of role="group"
. To achieve interactions demostrated in the demo, some helper classes are being added and removed based on actions to the list item node. To achieve the desired hover and focus states, applying the .slds-is-hovered
and .slds-is-focused
class helpers to the li
on its respective interactions. If an item is selected and want to demostrate that state, applying the .slds-is-selected
helper class will give you this outcome.
In our example, we are using a chevron icon on tree branches to help indicate to the user what action clicking the tree branch will perform, whether opening or closing it. The effect of rotating the icon 90° to indicate open/closed status is achieved by applying the ARIA attribute aria-controls
to the button the icon is contained within. The value of the aria-controls
attribute should be the ID of the group that clicking the button will affect.
Usage
Class Name | Usage | |
---|---|---|
.slds-tree_container | Applied to:
Sets | Required: Required Comments:-- |
.slds-tree | Applied to:
Initializes tree | Required: Required Comments:-- |
.slds-tree__item | Applied to:
Initializes tree item | Required: Required Comments:Contains the icon and the action that toggles the nested branch |